<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS实现文字渐变、描边、阴影等效果</title>

  <style>
    /* 这种字体渐变的方法可以这么理解：
    字体本身是有颜色的，先让字体本身的颜色变透明（text-fill-color为transparent），
    然后添加渐变的背景色(background-image: line-gradient...)，
    但是得让背景色作用在字体上(background-clip: text)。

    要注意的是：
    （1）text-fill-color 是个非标准属性，但多数浏览器支持带-webkit前缀，所以使用时需要带上-webkit前缀。
    （2）background-clip属性虽然多数浏览器已经支持，但text属性值浏览器支持还需要加-webkit前缀。（参考这里：https://developer.mozilla.org...）
        以上两条，通常使用postcss时是不会自动加前缀的，所以也就不能偷懒。
    （3）要注意-webkit-text-fill-color: transparent对字体带来的影响，因为设置了透明，笔者在使用时踩了坑，
        同时使用了text-overflow: ellipsis; 这个时候是看不到点点点的。 */
    .gradient-text {
      font-size: 36px;
      font-weight: bold;
      color: #ff0000;
      background: linear-gradient(180deg, #ff0000 0%, #ffe88e 100%);
      /* 将背景应用于文本内容，而不是整个元素 */
      background-clip: text;
      /* 让文本填充颜色变为透明，以便背景的渐变颜色能够透过文本显示 */
      -webkit-text-fill-color: transparent;
    }

    .text-shadow {
      text-shadow: 0 4px 0 #333;
    }

    .drop-shadow {
      filter: drop-shadow(0 4px 0 #333);
    }

    .stroke-center {
      -webkit-text-stroke: 2px #333;
    }

    .stroke-outside::before {
      content: attr(data-title);
      position: absolute;
      background: linear-gradient(180deg, #ff0000 0%, #ffe88e 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0;
    }

    .stroke-outside {
      font-size: 36px;
      -webkit-text-stroke: 6px #333;
    }
  </style>
</head>

<body>
  <a href="https://segmentfault.com/a/1190000040721783#item-1">参考：CSS和SVG实现文字渐变、描边、投影</a>
  <div class="gradient-text">渐变字体效果</div>
  <h3>渐变字体效果实现原理：
    字体本身是有颜色的，先让字体本身的颜色变透明（text-fill-color为transparent），
    然后添加渐变的背景色(background-image: line-gradient...)，
    但是得让背景色作用在字体上(background-clip: text)。
  </h3>

  <div class="gradient-text text-shadow">渐变字体效果+阴影（text-shadow）</div>
  <div class="gradient-text drop-shadow">渐变字体效果+阴影（drop-shadow）</div>
  <h3>
    渐变字体效果+阴影 - 实现原理：如果使用text-shadow给文字添加阴影效果，会达不到我们所期望效果，
    原因其实还和文本渐变有关，渐变其实是背景色，文字是透明的，所以给文字添加阴影，结果阴影就覆盖在了背景之上。
    除了使用text-shadow，还可以通过 drop-shadow滤镜实现
  </h3>

  <div class="gradient-text stroke-center">渐变字体效果+描边（-webkit-text-stroke）</div>
  <h3>
    CSS 中有个专门用于文字描边的属性 -webkit-text-stroke，可以控制描边的宽度和颜色。
    但是-webkit-text-stroke其实是 居中描边，并且是覆盖在文本上的，也无法更改描边方式
  </h3>

  <div class="stroke-outside" data-title="渐变字体效果+描边（使用伪元素）">渐变字体效果+描边（使用伪元素）</div>
  <h3>外描边效果实现：用两层文本，一层文本描边，一层文本渐变就可以了，为了节省标签，可以用伪元素来生成。::before设置渐变，位于上方，原文本设置描边，位于下方。</h3>



</body>

</html>